<!--处方收费-->
<template>
    <div
            class="app-container"
            :element-loading-text="loadingText">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :inline="true" label-width="100px">

            <el-form-item label="挂号单ID" prop="regId">
                <el-input v-model="regId" placeholder="请输入挂号单号" clearable size="small" style="width:300px" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" >查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="mini" @click="awaitWrite" >读取IC卡</el-button>
            </el-form-item>

        </el-form>
        <!-- 查询条件结束 -->

        <!-- 挂号输入框下面的所有内容开始 -->
        <div v-if="careHistory.regId!==undefined">
            <!-- 病例信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-form label-position="right" label-width="120px" inline class="demo-table-expand">
                    <el-form-item label="挂号单号:">
                        <span v-text="careHistory.regId" />
                    </el-form-item>
                    <el-form-item label="医生姓名:">
                        <span v-text="careHistory.userName" />
                    </el-form-item>
                    <el-form-item label="科室名称:">
                        <span v-text="careHistory.deptName" />
                    </el-form-item>
                    <el-form-item label=" 患者姓名:">
                        <span v-text="careHistory.patientName" />
                    </el-form-item>
                    <el-form-item label="就诊时间:">
                        <span v-text="careHistory.careTime" />
                    </el-form-item>
                    <el-form-item label="主诉:">
                        <span v-text="careHistory.caseTitle" />
                    </el-form-item>
                    <el-form-item label="诊断信息:">
                        <span v-text="careHistory.caseResult" />
                    </el-form-item>
                    <el-form-item label="医生建议:">
                        <span v-text="careHistory.doctorTips" />
                    </el-form-item>
                </el-form>
            </el-card>
            <!-- 病例信息结束 -->

            <!-- 工具按钮开始  @click="handlePayWithZfb" -->
            <el-card style="margin-bottom: 5px">
                <el-button type="success" icon="el-icon-finished" @click="handleSelectAll">全选</el-button>
                <el-button type="success" icon="el-icon-finished" @click="handleUnSelectAll">取消全选</el-button>
                <el-button type="danger" icon="el-icon-bank-card" @click="handlePayWithCash">现金支付</el-button>
                <el-button type="danger" icon="el-icon-bank-card" @click="handlePayWithZfb" >微信支付</el-button>
                <span style="margin-left:20px">订单总额:<span style="color:red;margin-left:20px">￥: {{ allAmount }}</span></span>
            </el-card>
            <!-- 工具结束开始 -->

            <!-- 未支付的处方信息开始 -->
            <el-card style="margin-bottom: 5px">
                <el-collapse v-if="careOrders" v-model="activeNames">
                    <el-collapse-item v-for="(item,index) in careOrders" :key="index" :name="index">
                        <template slot="title">
                            【{{ item.itemType==='0'?'药用处方':'检查处方'}}】【{{ index+1 }}】【处方总额】:￥{{ item.sum }}
                        </template>
                        <el-table
                                ref="refTable"
                                border
                                :data="item.careOrderItem"
                                :row-class-name="tableRowClassName"
                                @selection-change="handleCareOrderItemSelectionChange($event,item.coId)">
                            <el-table-column type="selection" width="55" align="center" />
                            <el-table-column label="序号" align="center" type="index" width="50" />
                            <el-table-column :label="item.itemType==='0'?'药品名称':'项目名称'" align="center" prop="itemName" />
                            <el-table-column label="数量" align="center" prop="num" />
                            <el-table-column label="单价(元)" align="center" prop="price" />
                            <el-table-column label="金额(元)" align="center" prop="amount" />
                            <el-table-column label="备注" align="center" prop="remark" />
                            <el-table-column label="状态" align="center" prop="status" :formatter="payTypeFormat" />
                        </el-table>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
            <!-- 未支付的处方信息结束 -->
            <!-- 挂号输入框下面的所有内容结束 -->
        </div>
        <div v-else style="text-align:center">请输入正确的挂号单ID查询</div>

        <!--微信弹出层-->
        <el-dialog
                title="请使用微信支付"
                :visible.sync="openPay"
                center
                :close-on-click-modal="false"
                :before-close="handleClose"
                append-to-body>
            <el-form label-position="left" label-width="120px" inline class="demo-table-expand">
                <el-card>
                    <el-form-item label="订单号:">
                        <span>{{ orderId }}</span>
                    </el-form-item>
                    <el-form-item label="总金额:">
                        <span>{{ allAmount }}</span>
                    </el-form-item>
                </el-card>
            </el-form>
            <div style="text-align:center">
                <vue-qr :text="codeUrl" :size="200"  />
                <div>请使用微信扫码</div>
                <el-button round style="margin-top: 20px" @click="updateTheStatus" >完成支付，点击核对订单</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
    // 引入生成二维码的组件
    import vueQr from 'vue-qr'
    export default {
        components:{
            vueQr
        },
        name: "Docharge",
        data(){
            return{

                //支付所用的装支付宝表单的数据
                theForm:"",

                // 用户输入的挂号单号
                regId: '',

                // 病例对象
                careHistory:{},

                // 状态名
                loadingText:'',

                //处方信息
                careOrders:[],

                //展开折叠板的名字
                activeNames:[],

                // 当前选中的订单总额
                allAmount: 0.00,
                //当前选中的所有集合项目
                itemObjs:[],
                careOrderItems:[],

                //支付类型数组
                payTypeArray:[],

                // 支付对象
                orderId: undefined,
                codeUrl:"",

                // 是否打开支付宝二维码支付层
                openPay: false,
                // 定时轮询对象
                intervalObj: undefined

            }
        },
        created() {
            this.initPayType();
        },
        methods:{

            //根据regId查询数据
            handleQuery() {
                if (this.regId===''){
                    this.$message.error('请输入挂号单ID');
                    this.resetCurrentParams();
                    return
                }
                this.careHistory={};
                this.careOrderItem=[];
                this.allAmount=0;
                this.$http.get('/charge/api/prescription/getOneByRegId?regId=' + this.regId).then(result => {
                    this.careHistory = result.data.data.careHistory;
                    this.careOrders=result.data.data.list;
                    this.loadingText = ''
                    this.careOrders.filter((c,index)=>{
                        this.activeNames.push(index)
                    })
                })
            },

            //读取IC卡的功能
            awaitWrite(){
                this.$message.error("功能待定哦！亲")
            },


            // 监听多个表格的checkbox的选中事件
            handleCareOrderItemSelectionChange(selection,coId){
                if (this.itemObjs.length === 0) {
                    this.itemObjs = selection
                } else {
                    for (let i = 0; i < this.itemObjs.length; i++) {
                        const obj = this.itemObjs[i]
                        if (obj.coId === coId) {
                            this.itemObjs.splice(i, 1)
                            i--
                        }
                    }
                    // 最后再来添加
                    selection.filter(newItem => {
                        this.itemObjs.push(newItem)
                    })
                }
                // 调用计算选中的总额
                this.computeAllAmount()
            },

            /*方法-药方支付类型-开始*/
            //支付类型发送请求
            initPayType(){
                this.$http.get("/system/api/dict/data/findByType/his_order_details_status").then(result=>{
                    this.payTypeArray = result.data.data;
                })
            },
            //支付类型字典解析
            payTypeFormat(row){
                let v = row.status;
                return this.formatDict2(this.payTypeArray,v);
            },
            /*方法-药方支付类型-结束*/

            tableRowClassName({ row, rowIndex }) {
                row.index = rowIndex
            },

            //计算选中的总额
            computeAllAmount() {
                this.allAmount = 0
                this.itemObjs.filter(item => {
                    this.allAmount += item.amount
                })
            },

            // 全选择
            handleSelectAll() { // 先取消再反选择
                this.allAmount=0;
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                    t.toggleAllSelection() // 注意不要用错方法了
                })
            },
            // 取消全选
            handleUnSelectAll() {
                const tables = this.$refs.refTable
                tables.filter(t => {
                    t.clearSelection()
                })
            },

            //查询的数组归零
            resetCurrentParams() {
                this.careHistory = {}
                this.careOrderItem = []
            },

            // 现金支付
            handlePayWithCash() {
                if (!this.careHistory.regId) {
                    this.$message.error('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    this.$message.error('请选择要支付的项目')
                    return
                }else {
                    let itemIds = [];
                    for (let i = 0; i < this.itemObjs.length; i++) {
                        itemIds.push(this.itemObjs[i].itemId)
                    }
                    this.$http.post("/charge/api/prescription/cashPay/" + this.careHistory.regId + "/" + this.allAmount, itemIds).then(result => {
                        console.log(result);
                        if (result.data.code == 200) {
                            this.careHistory = {};
                            this.careOrderItem = [];
                            this.itemObjs=[];
                            this.regId="";
                            this.$message.success("支付成功！")
                        }
                    })
                }

            },

            //微信支付
            handlePayWithZfb() {
                if (!this.careHistory.regId) {
                    this.$message.error('请输入挂号单ID查询')
                    return
                } else if (this.itemObjs.length === 0) {
                    this.$message.warning('请选择要支付的项目')
                    return
                } else {
                    // 发送请求
                    // this.loading = true
                    // this.loadingText = '订单创建并支付宝支付中'
                    this.$confirm('是否确定创建订单并使用支付宝支付?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 打开支付的弹出层
                        this.openPay = true;
                        this.$http.get("charge/api/ali/carateNative?patientName="+this.careHistory.patientName).then(result=>{
                            this.orderId=result.data.data.orderId;
                            this.codeUrl=result.data.data.codeUrl;
                            this.$message.success('订单创建成功，请扫码支付')
                        }).catch(() => {
                            this.$message.error('创建订单失败')
                            // this.loading = false
                        })
                    }).catch(() => {
                        this.$message.info('创建已取消')
                        // this.loading = false
                    })
                }
            },
            // 如果用户没有支付，而弹出层被关闭了
            handleClose() {
                this.$confirm('您确定放弃支付吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message.error('您已放弃支付')
                    this.resetCurrentParams()
                    this.openPay = false
                    // 关闭轮询
                    clearInterval(this.intervalObj)
                }).catch(() => {
                    this.$message.warning('欢迎继续支付')
                })
            },
            updateTheStatus(){
                // 组装数据
                const postObj = {
                    orderChargeDto: {
                        orderAmount: this.allAmount,
                        regId: this.careHistory.regId,
                        orderId: this.orderId
                    },
                    orderChargeItemDtoList: []
                }
                let itemIds = [];
                for (let i = 0; i < this.itemObjs.length; i++) {
                    itemIds.push(this.itemObjs[i].itemId)
                }
                postObj.orderChargeItemDtoList=itemIds;

                //发送请求
                this.$http.post("charge/api/ali/verify",postObj).then(result=>{
                    if (result.data.code==200){
                        // 打开支付的弹出层
                        this.openPay = false;
                        this.regId="";
                        this.orderId="";
                        this.codeUrl="";
                        this.allAmount=0;
                        this.resetCurrentParams();
                        this.$message.success('订单校验成功！');
                    }
                })

            }



        }
    }
</script>

<style scoped>
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>
